<template>
  <div class="view-content">
    <!-- <el-radio-group size="default" v-model="tabs.value">
      <el-radio-button v-for="(item, i) in tabs.list" :key="i" :label="i">
        {{ item }}
      </el-radio-button>
    </el-radio-group> -->
    <div class="tabs-content">
      <div class="tab-pane" v-show="tabs.value === 0">
        <Step v-if="addVisible" @back="addVisible = false" />
        <List v-else @added="handleAdd" @edit="handleEdit" />
      </div>
      <div class="tab-pane" v-show="tabs.value === 1">
        功能开发中
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, provide } from 'vue'
import Step from './configStep/index.vue'
import List from './configStep/list.vue'
import { initData } from './configStep/composables'
import { useStore } from '@/store'

const store = useStore()

const formData = ref(initData(store))
provide('formData', formData)

// 新增
const handleAdd = () => {
  formData.value = initData(store)
  addVisible.value = true
}

// 编辑
const handleEdit = (item: any) => {
  formData.value.id = item.id
  formData.value.name = item.name
  formData.value.status = item.status
  formData.value.createdBy = item.createdBy
  formData.value.mainList = JSON.parse(item.mainJson)
  addVisible.value = true
}

const tabs = ref({
  value: 0,
  list: ['大屏管理', '模板管理']
})
const addVisible = ref(false)
</script>
<script lang="ts">
export default {
  name: 'ConfigScreen'
}
</script>
<style lang="scss" scoped>
.view-content {
  height: 100%;
  display: flex;
  flex-direction: column !important;
  box-sizing: border-box;
  background: url("@/assets/temp/bg_modules.png") 0 0 no-repeat;
  background-size: 100% 100%;
  padding: $space-margin;
  .el-radio-group {
    margin-bottom: $space-margin;
    &:deep(.el-radio-button__original-radio + .el-radio-button__inner) {
      border-color: #1A9ADB;
      background: transparent;
      color: #fff;
      padding: 8px 30px;
    }
    &:deep(.el-radio-button__original-radio:checked + .el-radio-button__inner) {
      border-color: #1A9ADB;
      background: linear-gradient(179deg, rgba(0,135,255,0.25) 25%, rgba(0,135,255,0.52) 95%);
    }
  }
}
</style>

<style lang="scss">
  .tabs-content, .tab-pane {
    width: 100%;
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  // 标题样式
  .content-title {
    width: 100%;
    color: #fff;
    display: flex;
    flex-direction: row;
    margin-bottom: $space-margin;
    font-size: 16px;
    font-weight: 500;
    padding-left: 14px;
    box-sizing: border-box;
    position: relative;
    &::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 4px;
      background: #2CA6FF;
    }
  }
</style>
